<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<style>
    #body01 {
        background-image: url("Static/index.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100%;

    }

    /* 下拉按钮样式 */
    .dropbtn {
        text-align: right;
        background-color: #4CAF50;
        color: white;
        padding: 10px;
        font-size: 10px;
        border: none;
        cursor: pointer;
        /*position: relative;
        right:0;
        bottom:0;*/
    }

    /* 容器 <div> - 需要定位下拉内容 */
    .dropdown {
        position: relative;
        display: inline-block;
        float: right;
    }

    /* 下拉内容 (默认隐藏) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
        font-size: 10px;
    }


    /* 下拉菜单的链接 */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* 鼠标移上去后修改下拉菜单链接颜色 */
    .dropdown-content a:hover {
        background-color: #f1f1f1
    }

    /* 在鼠标移上去后显示下拉菜单 */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* 当下拉内容显示后修改下拉按钮的背景颜色 */
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    .dropdown-bbt {
        float: left;
    }

    .dropdown-menu li a {
        color: white;
        text-decoration: none;
    }

    .dropdown-menu li:hover {
        background-color: #096;
        font-size: 24px;
    }

    .bottom {
        position: absolute;
        right: 0;
        bottom: 0;
    }

    .sidebar {
        float: right;
    }

    .sidebar a {
        text-decoration: none;
    }

    .bottom a {
        text-decoration: none;
    }
    .turnimg{
        width: 51%;
        margin: auto;
    }

</style>
<body id="body01">

<div class="page-header">
    <h1 style="text-align: center;color: white">酒店管理系统
        <div class="dropdown" style="text-align: left">
            <button class="dropbtn">登录|注册</button>
            <div class="dropdown-content">
                <a href="${pageContext.request.contextPath}/login.jsp">用户登录</a>

                <a href="${pageContext.request.contextPath}/zhuceCustomer.jsp">用户注册</a>
                <%--        <a href="${pageContext.request.contextPath}/personalcenter?username=one">个人中心</a>--%>
                <%--        <a href="register.jsp">用户注册</a>--%>
                <a href="${pageContext.request.contextPath}/center">个人中心</a>

            </div>
        </div>
    </h1>
</div>
<br>
<div class="sidebar">
    <a href="http://www.baidu.com">联系我们</a>
    <a href="http://www.baidu.com">关于酒店</a>
    <a href="http://www.baidu.com">更多信息</a>
    <span>客服热线—10086</span>

</div>
<br>


<%--<div class="dropdown" style="text-align: left">
    <button class="dropbtn">登录|注册</button>
    <div class="dropdown-content">
        <a href="${pageContext.request.contextPath}/login">用户登录</a>

        <a href="zhuceCustomer.jsp">用户注册</a>
        <a href="${pageContext.request.contextPath}/center">个人中心</a>

        &lt;%&ndash;        <a href="register.jsp">用户注册</a>&ndash;%&gt;
        &lt;%&ndash;        <a href="WEB-INF/jsp/personalcenter.jsp">个人中心</a>&ndash;%&gt;

    </div>--%>
<%--</div>--%>


<div class="dropdown-bbt">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        预定
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="/hostel_war_exploded/type?type=单人间">单人间</a></li>
        <li><a href="/hostel_war_exploded/type?type=双人间">双人间</a></li>
    </ul>
</div>
<br>
<div class="turnimg">

    <img src="Static/lunbo_1.jpg" id="img" width="700px" height="500px" />


</div>

<script type="text/javascript">
    /*
     * 分析：在页面展示图片
     * 定义方法修改图片对象的属性
     * 定义计时器，每3秒刚换图片
     */
    var num = 1;

    function fun() {
        num++;
        if (num > 3) {
            num = 1;
        }
        var img = document.getElementById("img");
        img.src = "Static/lunbo_" + num + ".jpg";
    }

    setInterval(fun, 3000);

</script>

<div class="bottom">
    <a href="http://www.baidu.com" style="color:white" target="_blank">遇见问题？</a>
</div>

</body>
</html>




